<template>
    <el-tabs v-model="activeName">
      <el-tab-pane label="服务类" name="second">
        <div class="gongdan"> 
          <el-form :inline="true" :model="formInline" class="demo-form-inline" >
            <el-form-item>
                <el-input v-model="formInline.search" placeholder="请输入搜索内容"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit" icon="el-icon-search">搜索</el-button>
                <el-button type="primary" @click="onReset" icon="el-icon-refresh">重置</el-button>
                <el-button type="primary" @click="addDialog = true" icon="el-icon-circle-plus-outline">添加</el-button>
            </el-form-item>
        </el-form>
        </div>
        <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="id" label="编码" width="180">
      </el-table-column>
      <el-table-column
        prop="name" label="名称" width="180">
      </el-table-column>
      <el-table-column
        prop="describe" label="描述">
      </el-table-column>
      <el-table-column
        prop="type" label="是否启用">
        <template slot-scope="scope">
            <el-switch
          style="display: block"
          v-model="scope.row.type"
          active-color="#13ce66"
          inactive-color="#ff4949"
          active-text="启用"
          inactive-text="禁用">
            </el-switch>
        </template>
       
      </el-table-column>
      <el-table-column
        prop="operate"
        label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" plain class="el-icon-edit" @click=edit(scope.row)>编辑</el-button>
          <el-popconfirm  @confirm=del(scope.row) title="这是一段内容确定删除吗？">
            <el-button slot="reference" type="text" size="small" plain class="el-icon-circle-close" >删除</el-button>
          </el-popconfirm>
        </template>
       
      </el-table-column>
    </el-table></el-tab-pane>
      <el-tab-pane label="业务系统类" name="third">角色管理</el-tab-pane>
      <el-tab-pane label="桌面终端类" name="fourth">定时任务补偿</el-tab-pane>
      <el-tab-pane label="服务器设备类" name="fifth">定时任务补偿</el-tab-pane>
    
      
     <div class="block" v-show="page">
        <el-pagination @size-change="handleSizeChange" @current-change="currentChange"
       :current-page="page" :page-sizes="[3,5]" :page-size="count"
        layout="total, sizes, prev, pager, next, jumper" :total="total" class="fenyema">
        </el-pagination>
     </div>
     <el-dialog title="新增" :visible.sync="addDialog">
            <el-form :model="addData">
                <el-form-item label="编号" :label-width="formLabelWidth">
                    <el-input v-model="addData.id" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="姓名" :label-width="formLabelWidth">
                    <el-input v-model="addData.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="描述" :label-width="formLabelWidth">
                    <el-input v-model="addData.describe" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="是否启用" :label-width="formLabelWidth">
                    <el-select v-model="addData.type" placeholder="类型">
                        <el-option label="启用" value=true></el-option>
                        <el-option label="禁止" value=false></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addDialog = false">取 消</el-button>
                <el-button type="primary" @click="add" >确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="编辑" :visible.sync="editDialog">
            <el-form :model="editData">
                <el-form-item label="编号" :label-width="formLabelWidth">
                    <el-input v-model="editData.id" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="姓名" :label-width="formLabelWidth">
                    <el-input v-model="editData.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="描述" :label-width="formLabelWidth">
                    <el-input v-model="editData.describe" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="是否启用" :label-width="formLabelWidth">
                    <el-select v-model="editData.type" placeholder="类型">
                        <el-option label="启用" value=true></el-option>
                        <el-option label="禁止" value=false></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editDialog=false">取 消</el-button>
                <el-button type="primary" @click="Onedit" >确 定</el-button>
            </div>
        </el-dialog>
    </el-tabs>
    
  </template>
  <script>
 
    export default {
      data() {
        return {
          addDialog:false,
          editDialog: false,
          page: 1,
          count: 5,
          total:50,
          formLabelWidth:"80px",
          formInline: {
                search: ''
            },
          activeName: 'second',
          tableData: [{
            id: '001',
            name: '软件服务',
            describe: '服务类服务类服务类',
            type:true,
            operate:'',
          }, {
            id: '002',
            name: '硬件服务',
            describe: '基础设施类基础设施类基础设施类',
            typee:true,
            operate:'',
          }, {
            id: '003',
            name: '软件服务2',
            describe: '桌面终端类桌面终端类桌面终端类',
            type:false,
            operate:'',
          }, {
            id: '004',
            name: '硬件服务2',
            describe: '服务器设备类服务器设备类服务器设备类',
            type:false,
            operate:'',
          }, {
            id: '005',
            name: '软件服务3',
            describe: '服务类服务类服务类',
            type:true,
            operate:'',
            editid:'',
          }],
          addData:{
                id:'',
                name:'',
                describe:'',
                type:'启用'
            },
            editData:{
                id:'',
                name:'',
                describe:'',
                type:''
            },
        };
      },
      methods: {
        render() {
             this.$axios({
                url: `/Gdmb?_limit=${this.count}&_page=${this.page}`,
                method:'get',
                params:{
                  name_like: `${this.formInline.search}`
                }
            }).then(({data,headers})=>{
              this.tableData = data
              this.total = Number(headers['x-total-count'])
              
            })
         
        },
        currentChange(page) {
            this.page = page;
            this.render()
        },
        handleSizeChange(v){
          this.count=v
          this.render()
        },
        onSubmit() { 
            this.render();
        },
        onReset(){ 
           this.formInline.search='' ;
            this.page=1;
            this.render();

        },
        add() {
        this.$axios({
        url: `/Gdmb`,
        method: "post",
        data:{
                id:this.addData.id,
                name:this.addData.name,
                describe:this.addData.describe,
                type:Boolean(this.addData.type)
        },
      }),
      this.addDialog = false;
      this.$message.success('添加成功');
      this.render()
    },
    edit(v) {
            console.log(v);
            this.editDialog = true;
            this.editData={
                id:v.id,
                name:v.name,
                describe:v.describe,
                type:String(v.type)
            }
            this.editid=v.id
        },
        Onedit() {
          this.$axios({
          url: `/Gdmb/${this.editid}`,
          method: "patch",
          data:this.editData,
        }),this.editDialog = false;
      this.$message.success('修改成功');
     
       this.render()
    },
    del(v){
     this.$axios({
      url:`/Gdmb/${v.id}`,
      method:"delete",
    }),this.$message.success('删除成功');
    this.render()
    
    }
      },
      mounted() {
        this.render()
      },
    };
  </script>
  <style>

  .xinzeng{
    float:right;
  }
  
  .el-icon-edit{
   cursor: pointer;
  }
  .el-icon-circle-close{
    cursor: pointer;
  }
  .demo-form-inline{
    float: left;
    margin-left: 30px;
    
  }
  .fenyema{
    margin-top: 80px;
  }
</style>